  $(function(){
    let Img = $('#content>#cen>#c_left>#one>#one_o>img'),
       small  = $('#content>#cen>#c_left>#one>#one_o'),
       mask   = $('#content>#cen>#c_left>#one>#one_o>.mask'),
       big    = $('#content>#cen>#c_left>#one>#big'),
       bigImg = $('#content>#cen>#c_left>#one>#big>img'),
       smallImg  = $('#content>#cen>#c_left>#one>#imgs>ul>li') ;
       small.on({
         mouseover(){
          mask.css('display','block');
          big.css('display','block');
         },
         mouseout(){
          mask.css('display','none');
          big.css('display','none');
         }
       })
         smallImg.on('mouseover',function(){
           Img.attr('src',`${$(this).children().attr('src').replace('small','big')}`) ;
           bigImg.attr('src',`${$(this).children().attr('src').replace('small','bigimg')}`);
           $(this).css('border','2px solid black').siblings().css('border','none');
         })
        small.on('mousemove',function(ev){
           let x = ev.pageX - mask.width()/2 - Img.offset().left;
           let y = ev.pageY - mask.height()/2 -Img.offset().top;
             x = x < 0 ? 0: x;
             x = x > Img.width()-mask.width()? Img.width()-mask.width():x;
             y = y < 0 ? 0 : y;
             y = y > Img.height()-mask.height()? Img.height()-mask.height():y;
           mask.css('left',x).css('top',y);
           let MaxX = bigImg.width() - big.width(),
           MinX = small.width() - mask.width();
           let a = MaxX/MinX;
           let X = x * a;
           let Y = y * a;
           bigImg.css('marginTop',-Y).css('marginLeft',-X)
         })



         let shu = 1,jiaGe ,zongJia,one,two,three,b=0,c=184,d=262,pan=[];
         $('#jia').on('click',function(){
         $('#shuliang').val(`${shu+=1}`);
            if($('#jiage').text().indexOf('-') !== -1){
           jiaGe = $('#jiage').text().split('-')[0];
         }else{
           jiaGe = parseInt($('#jiage').text()).toFixed(2);
     
         }
           zongJia = jiaGe * shu;
           one = (zongJia/3 ).toFixed(2);
           two = (zongJia/6 ).toFixed(2);
           three = (zongJia/12 ).toFixed(2);
           $('#fenqi_1').html(`${one} x3`);
           $('#fenqi_2').html(`${two} x6`);
           $('#fenqi_3').html(`${three} x12`);
            $('#fenqi>li').each((i,el)=>{
               if($(el).attr('flag') === 'true') {
                  $('#fenQi').text(`${$(el).find('.fenqi_1').text()}`);
               }  
            })
            ;
          console.log(zongJia);
         })
         $('#jian').on('click',function(){
          if(shu <=1){
           $('#shuliang').val(1);
          }else if(shu >1){
           $('#shuliang').val(`${shu-=1}`);
          }
          jiaGe = $('#jiage').text().split('-')[0];
           zongJia = jiaGe * shu;
           one = (zongJia/3 ).toFixed(2)
           two = (zongJia/6 ).toFixed(2);
           three = (zongJia/12 ).toFixed(2);
           $('#fenqi_1').html(`${one} x 3`);
           $('#fenqi_2').html(`${two} x 6`);
           $('#fenqi_3').html(`${three} x 12`);
           $('#fenqi>li').each((i,el)=>{
               if($(el).attr('flag') === 'true') {
                 $('#fenQi').text(`${$(el).find('.fenqi_1').text()}`);
               }  
            })
           console.log(zongJia);
         })
         $('#fenqi>li').on('click',function(){
           if($(this).attr('flag') == 'false'){
             $(this).attr('flag','true').css('border','2px solid #FF0036').siblings().attr('flag','false').css('border','1px solid #ccc');
               $('#jiage_fen').css('display','block');$('#fenQi').text(`${$(this).find('.fenqi_1').text()}`);
              }else{
               $('#jiage_fen').css('display','none'); $(this).css('border','1px solid #ccc').attr('flag','false');
              }
         })
         $('#fenlei>li').on('click',function(){
           if($(this).attr('flag') == 'false'){
           $(this).attr('flag','true').css('border','2px solid #FF0036').siblings().attr('flag','false').css('border','1px solid #ccc');
           if($(`#fenlei>li:eq(${0})`).text() ==$(this).text()){
             $('#jifen').text('92');
             $('#jiage').text('184.00');
             $('#shuliang').val();
           jiaGe = parseInt($('#jiage').text()).toFixed(2);
           zongJia = jiaGe * shu;
           one = (zongJia/3 ).toFixed(2);
           two = (zongJia/6 ).toFixed(2);
           three = (zongJia/12 ).toFixed(2);
           $('#fenqi_1').html(`${one} x3`);
           $('#fenqi_2').html(`${two} x6`);
           $('#fenqi_3').html(`${three} x12`);
           }
           if($(`#fenlei>li:eq(${1})`).text() ==$(this).text()){
             $('#jifen').text('93');
             $('#jiage').text('184.00')
             $('#shuliang').val();
           jiaGe = parseInt($('#jiage').text()).toFixed(2);
           zongJia = jiaGe * shu;
           one = (zongJia/3 ).toFixed(2);
           two = (zongJia/6 ).toFixed(2);
           three = (zongJia/12 ).toFixed(2);
           $('#fenqi_1').html(`${one} x3`);
           $('#fenqi_2').html(`${two} x6`);
           $('#fenqi_3').html(`${three} x12`);
           }
           if($(`#fenlei>li:eq(${2})`).text() ==$(this).text()){
             $('#jifen').text('132');
             $('#jiage').text('262.00')
             $('#shuliang').val();
           jiaGe = parseInt($('#jiage').text()).toFixed(2);
           zongJia = jiaGe * shu;
           one = (zongJia/3 ).toFixed(2);
           two = (zongJia/6 ).toFixed(2);
           three = (zongJia/12 ).toFixed(2);
           $('#fenqi_1').html(`${one} x3`);
           $('#fenqi_2').html(`${two} x6`);
           $('#fenqi_3').html(`${three} x12`);
           }
           }else{
             $(this).css('border','1px solid #ccc').attr('flag','false');
           }
         })
         $('#zhifu').on('click',function(){
           if($('#zhifus').attr('flag') == 'false'){
             $('#zhifus').attr('flag','true').css('display','block')
           }else{
             $('#zhifus').attr('flag','false').css('display','none')
           }
         })
       
  })
